<template>
  <div>
    <!--  名师讲坛  -->
    <div class="side-item">
      <div class="flex header">
        <div class="flex flex-center">
          <icon-svg name="iconmingshihuicui" class="nav-icon"/>
          <div class="title">学习推荐</div>
        </div>
        <div class="more" @click="morePosts">更多>></div>
      </div>
      <div class="fammous-con">
        <div v-for="(item,index) in recommendList" @click="navToDetail(item)" :key="index" class="fammous-con box">
          <div class="img-con">
            <img :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+item.postImage" alt="vedio" class="image">
          </div>
          <div class="famous-title" :title="item.postTitle">{{item.postTitle}}</div>
          <div class="famous-presenter">发布人： {{item.postUid}}</div>
        </div>
        <div class="reload-con" @click="changeList">
          <a-icon type="sync" class="reload-icon"/>
          <span class="reload">换一批</span>
        </div>
      </div>
    </div>
    <!--  名师课程表  -->
    <div class="course-con">
      <a-table :columns="columns" :data-source="data" class="course-table" :pagination=false></a-table>
    </div>
    <!--  热门视频推荐  -->
    <div class="teacher-con">
      <div class="flex header">
        <div class="flex flex-center">
          <icon-svg name="iconwangxiaomingshi" class="nav-icon"/>
          <div class="title">常见问题优质解答</div>
        </div>
        <div class="more" @click="morePosts">更多>></div>
      </div>
      <div class="fammous-con">
        <hot-vedio></hot-vedio>
      </div>
    </div>
  </div>
</template>

<script>
  import HotVedio from "./HotVedio";
  import {getRecommendList} from "@/api";
  const famousCourse = [];
  const teacherList = [];
  //名师课程表
  const columns = [
    {
      title: '主讲人',
      dataIndex: 'person',
      width: '27%',
      ellipsis: true,
      align: 'center',
      scopedSlots: { customRender: 'person' },
    },
    {
      title: '课程名称',
      width: '42%',
      className: 'courseName',
      dataIndex: 'courseName',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '专业',
      width: '30%',
      className: 'profession',
      dataIndex: 'profession',
      ellipsis: true,
      align: 'center',
    },
  ];
  const data = [
    {
      key: '1',
      person: '郭涛',
      courseName: '零基础高数学基础',
      profession: '软件开发',
    },
    {
      key: '2',
      person: '李丽红',
      courseName: '零基础美术基础',
      profession: '软件开发',
    },
    {
      key: '3',
      person: '李丽红',
      courseName: '零基础高数学基础',
      profession: '软件开发',
    },
    {
      key: '4',
      person: '李丽红',
      courseName: '零基础高数学基础',
      profession: '软件开发',
    },
    {
      key: '5',
      person: '郭涛',
      courseName: '零基础高数学基础',
      profession: '软件开发',
    },
    {
      key: '6',
      person: '李丽红',
      courseName: '零基础高数学基础',
      profession: '软件开发',
    },
  ];
  //名师推荐
  for (let i = 0; i < 4; i++){
    teacherList.push({
      teacherName: `李莉`,
      img: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
      isFollow: true,
      profession: '计算机与应用',
    });
  }
  export default {
    name: "SideBar.vue",
    data(){
      return{
        recommendList: [],
        data,
        columns,
        teacherList,
        pageNum: 1,
      }
    },
    components: {
      HotVedio
    },
    created() {
      this.getList()
    },
    methods: {
      //更多学习推荐
      morePosts() {
        this.$router.push('/communication')
      },
      //获取学习推荐
      getList(pageNum=1, pageSize=4) {
        this.pageNum = pageNum
        let params = {
          pageNum: pageNum,
          pageSize: pageSize
        }
        getRecommendList(params)
          .then((res) => {
            if (res.status == 200){
              this.recommendList = res.data.list
            }
            else{
              this.$message.info(res.msg)
            }
          })
      },
      //跳转到学习推荐详情
      navToDetail(item) {
        this.$router.push({name: 'communicationDetail', params: {postId: item.postId}})
      },
      //换一换
      changeList() {
        this.pageNum += 1
        this.getList(this.pageNum)
      }
    }
  }
</script>

<style lang="less" scoped>
  .flex{
    display: flex;
    flex-direction: row;
  }
  .flex-center{
    justify-content: center;
    align-items: center;
  }
  .side-item{
    background-color: #ffffff;
  }
  .header{
    justify-content: space-between;
    align-items: center;
    padding: 5px;
  }
  .nav-icon{
    color: #5dd5c8;
    font-size: 10px;
  }
  .more{
    font-size: 12px;
    color: #999999;
    cursor: pointer;
  }
  .more:hover{
    color: #1bcbb4;
  }
  .title{
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    margin-left: 6px;
  }
  .img-con{
    overflow: hidden;
  }
  .image{
    width: 125px;
    height: 100px;
  }
  .fammous-con{
    display: inline-block;//行内块元素，既有块级属性又有行级属性
  }
  .box{
    width: 135px;
    margin: 0 10px 10px 10px;
    border: 2px solid #ffffff;
    border-radius: 3px;
    padding: 3px;
    cursor: pointer;
  }
  .box:hover{
    border: 2px solid #1bcbb4;
  }
  .famous-presenter{
    font-size: 12px;
    color: #222222;
    text-align: left;
    margin-top: 5px;
  }
  .famous-title{
    font-size: 14px;
    color: #222222;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: 600;
    height: 40px;
  }
  .reload{
    font-size: 12px;
    color: #999999;
    margin-right: 10px;
  }
  .reload:hover{
    color: #4087F2;
  }
  .reload-icon{
    color: #4087F2;
  }
  .reload-con{
    text-align: right;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .reload-con:hover{
    color: #4087F2;
  }
  /* 课程表格样式 */
  .course-con{
    background-color: #ffffff;
    padding: 14px 20px;
    margin-top: 1px;
  }
  .course-table{
    border-radius: 4px;
    border: solid 1px #dddddd;
    text-align: center;
  }
  /*名师推荐*/
  .teacher-con{
    margin-top: 20px;
    background-color: #ffffff;
  }
  .image-avatar{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid #1bcbb4;
  }
  .profession{
    font-size: 12px;
    color: #222222;
    text-align: center;
    margin-top: 5px;
  }

  /*热门视频*/
  .list-item{
    border-radius: 4px;
    //border: solid 2px #eeeeee;
    //padding: 5px;
    cursor: pointer;
    background-color: #ffffff;
  }
  .pitch:hover{
    border: solid 2px #1bcbb4;
    box-shadow: 2px 2px 20px #dddddd;
  }
  .hot-img{
    position: relative;
    top: 0px;
    left: 17px;
  }
  .item-title-live{
    margin-left: 4px;
    text-align: left;
  }
  .title-text-live{
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    width: 145px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 5px;
  }
  .footer-presenter-live{
    font-size: 12px;
    color: #222222;
    margin-top: 20px;
  }

  /* 覆盖ant默认样式 */
  .course-con{
    :global(.ant-table-thead  > tr > th){
      padding: 7px 1px;
      background-color: #D7E6FC;
      text-align: center;
    }
    :global(.ant-table-tbody > tr > td ){
      padding: 7px 1px;
      text-align: center;
    }
    :global(.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td){
      background-color: #EBF2FD !important;
    }
  }
</style>
